<template>
    <div class="main">
        <div class="main-top clearfix">
            <!-- <div class="top-box top-l">
                <div class="box-list">
                    <div class="list-t">Network (GH/s)</div>
                    <div class="list-b">{{paramsData.netWork}}</div>
                </div>
                <div class="box-list">
                    <div class="list-t">Difficulty</div>
                    <div class="list-b">{{paramsData.difficulty}}</div>
                </div>
            </div>
            <div class="top-box top-r">
                <div class="box-list">
                    <div class="list-t">Coin Supply (HSR)</div>
                    <div class="list-b">{{paramsData.coinSupply}}</div>
                </div>
                <div class="box-list">
                    <div class="list-t">BTC Price</div>
                    <div class="list-b">{{paramsData.btcPrice}}</div>
                </div>
            </div> -->
            <img class="logo" :src="headerData.logoUrl" alt="">
            <span class="price">{{headerData.shortName}} Price : {{paramsData.btcPrice}} BTC</span>
        </div>
        <div class="main-cen">
            <div class="cen-search">
                <input class="search-ipt" type="text" name="" v-model.trim="hasher" :placeholder="headerData.colorId != '' ? colorcoinsPlaceholder : HashPlaceholder">
                <button class="search-but" type="button" name="button" @click="search()">Search</button>
            </div>
            <transition name="fade">
                <div class="cen-error" v-if="noData">No data to display,It's not a valid input</div>
            </transition>
            <router-view></router-view>

        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
    name: 'home',
    data() {
        return {
            HashPlaceholder:'You may enter a block height, block hash, tx hash or address.',
            colorcoinsPlaceholder:'You may enter a tx hash or address.',
            noData: false,
            hasher: '',//条件，如果是彩色币：交易ID，钱包地址，如果是hsr:区块高度，区块哈希，交易ID，钱包地址
            headerData:{},//选中的hsr或者是彩色币对象数据
            paramsData:'',//头部返回的算力，难度，发行量，比特币价格
            pageObj:{//分页参数
                pageNum     :1,
                pageSize    :10
            }
        }
    },
    computed: {
        ...mapGetters(['G_SELECT_DATA']),
        // ...mapState(['StateUserAuth']),
    },
    mounted(){

    },
    created(){
        if(this.G_SELECT_DATA){
            this.headerData = this.G_SELECT_DATA;
            this.getHashrate();
        }
    },
    methods:{
        // 根据搜索条件进行搜索,查询可以是区块高度，区块哈希，交易ID，钱包地址
        search(){
            if(this.hasher == ''){
                return;
            }

            let colorId = this.headerData.colorId;
            let requerstHeader = {
                method  : 'get',
                params  : {
                    searchStr   :this.hasher,
                    pageNum     :this.pageObj.pageNum,
                    pageSize    :this.pageObj.pageSize
                }
            }
            // colorId存在的时候使用彩色币的查询，否则使用hsr的查询
            if(colorId){
                requerstHeader.url = 'explorer/colorcoins/api/v1/query/' + colorId;
            }else{
                requerstHeader.url = 'explorer/hsr/api/v1/query';
            }

            this.$http(requerstHeader).then((res)=>{
                let data = res.data;
                /**
                *根据数据类型做相应处理
                *EMPTY(0, ""),空
                *BLOCK_HEIGHT(1, "blockHeight"),区块高度
                *BLOCK_HASH(2, "blockHash"),区块哈希
                *TXID(3, "txId"),交易ID
                *ADDRESS(4, "address");钱包地址
                **/
                let dataType = data.dataType;
                if(data.responseCode === 1){
                    let toname,params;
                    if(dataType === 1 || dataType === 2){//区块高度,区块哈希
                        toname = 'block';
                        params = {
                            has:this.hasher,
                            type: dataType === 1 ? 1 : 2,//block页面需要根据传递的类型访问相应的api
                        }
                    }else if(dataType === 3){//交易ID
                        toname = 'tx';
                        params = {
                            txid : this.hasher
                        }
                    }else if(dataType === 4){//钱包地址
                        toname = 'address';
                        params = {
                            has : this.hasher
                        }
                    }

                    // 如果返回数据为空
                    if(!data.responseData || dataType === 0){
                        this.noData = true;
                        return;
                    }

                    this.hasher = '';
                    this.$router.push({name:toname,params:params});
                }
            })
        },
        // 获取算力，难度，发行量，比特币价格
        getHashrate(){
            let searchStr = this.headerData.shortName;
            let colorId = this.headerData.colorId;
            if(searchStr === "HSR"){
                colorId = "HSR";
            }
            this.$http({
                url     : `explorer/hsr/api/v1/information/${colorId}`,
                method  : 'get',
            }).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.paramsData = data.responseData;
                }
            })
        }
    },
    watch:{
        '$route'(to,from){
            // 根据切换的币种重新获取算力，难度，发行量，比特币价格
            if(to.name == 'explore' || to.name == 'default'){
                this.headerData = this.G_SELECT_DATA;
                this.getHashrate();

            }
        },
        'noData'(n){
            if(n){
                setTimeout(()=>{
                    this.noData = false;
                },3000)
            }
        }
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
}
</style>
